<template>
  <a-form-model
    ref="formModel"
    :model="form"
    :rules="formRule"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
  >
    <a-row :gutter="[16, 0]">
      <template v-for="(item, index) in formItems">
        <a-col v-if="isShow(item)" :key="index" :span="item.span || 12">
          <a-form-model-item
            :prop="item.prop"
            :label="item.label"
            :label-col="{ span: item.labelCol || 6 }"
            :wrapper-col="{ span: item.labelCol ? 24 - item.labelCol : 18 }"
          >
            <rendom
              v-if="item.componentType === 'rendom'"
              :render="item.render"
              :data="item"
              :index="index"
            ></rendom>
            <a-textarea
              v-else-if="item.componentType === 'textarea'"
              :ref="item.ref"
              :placeholder="item.placeholder || '请输入' + item.label"
              v-model="form[item.prop]"
              :auto-size="item.autoSize || { minRows: 3, maxRows: 5 }"
              :disabled="item.disabled"
            />

            <a-radio-group
              v-else-if="item.componentType === 'radio'"
              :ref="item.ref"
              v-model="form[item.prop]"
              :placeholder="item.placeholder || '请选择' + item.label"
              :disabled="item.disabled"
              @change="item.handle ? item.handle($event) : () => {}"
            >
              <a-radio 
                v-for="(item, index) in item.options"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-radio>
            </a-radio-group>

            <a-select
              v-else-if="item.componentType === 'select'"
              :ref="item.ref"
              v-model="form[item.prop]"
              :placeholder="item.placeholder || '请选择' + item.label"
              :disabled="item.disabled"
              @change="item.handle ? item.handle($event) : () => {}"
            >
              <a-select-option
                v-for="(item, index) in item.options"
                :key="`${index}`"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>

            <a-select
              v-else-if="item.componentType === 'selectTag'"
              :ref="item.ref"
              v-model="form[item.prop]"
              :placeholder="item.placeholder || '请选择' + item.label"
              :disabled="item.disabled"
              mode="tags"
              :labelInValue="item.config.labelInValue || false"
              :maxTagCount="item.config.maxTagCount || 3"
              @change="item.handle ? item.handle($event) : () => {}"
            >
              <a-select-option
                v-for="option in item.options"
                :key="`${option.value}`"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>

            <a-tree-select
              v-else-if="item.componentType === 'treeSelect'"
              :ref="item.ref"
              v-model="form[item.prop]"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="item.options"
              :placeholder="item.placeholder || '请选择' + item.label"
              :loadData="item.config && item.config.loadData ? item.config.loadData : undefined"
              :labelInValue="item.config ? item.config.labelInValue : false"
              :treeCheckable="item.config ? item.config.treeCheckable : false"
              :showCheckedStrategy="item.config ? item.config.showCheckedStrategy : showCheckedStrategy"
              @change="(value, label, extra) => item.handle && item.handle.call(parentEl, value, label, extra)"
            />

            <a-date-picker
              v-else-if="item.componentType === 'datePicker'"
              :format="item.format || 'YYYY-MM-DD'"
              :valueFormat="item.valueFormat"
              :placeholder="item.placeholder || '请选择' + item.label"
              v-model="form[item.prop]"
            />

            <slot
              v-else-if="item.componentType === 'slot'"
                              :name="item.prop"
            ></slot>

            <a-switch v-else-if="item.componentType === 'switch'" v-model="form[item.prop]" />

            <a-input
              v-else
              :ref="item.ref"
              v-model="form[item.prop]"
              :disabled="item.disabled"
              :placeholder="item.placeholder || '请输入' + item.label"
            />
          </a-form-model-item>
        </a-col>
      </template>
    </a-row>
    <slot name="customItem"></slot>
  </a-form-model>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>
